<template>
  <div>
    <fwb-modal v-if="isShowModal" @close="closeModal" size="md" id="CreateModal">
      <template #header>
        <div
          :class="['text-lg flex flex-col text-[1rem] text-[var(--modalFontColor)] font-[500] font-Medium', course == 2 ? 'ml-[25px]':'']">
          <svg-icon v-if="course == 2" @click="course = 1" name="back" width="12px" height="9px"
                    class="text-[var(--date)] cursor-pointer absolute left-[15px] top-[25px] s4k:top-[35px]"></svg-icon>
          <div>
            <p class="text-md " v-if="RuleTitle == 'Edit Recording Rule'">{{ RuleTitle }}</p>
            <p class="text-md " v-else>New Recording Rule</p>
            <p class="text-sm">Step {{ course }}/2</p>
          </div>
        </div>
      </template>

      <template #body>
        <div class="">
          <div class="absolute w-full h-[1px] bg-[var(--grid)] top-[60px] left-0 s4k:top-[80px]"></div>
          <div v-if="course == 1" class="list w-full h-[666px]">
            <div class="text-[20px] font-Medium font-[700] pr-[30px] relative">{{ RuleTitle }}
              <div
                class="w-[100px] h-[41px] rounded-lg bg-[#E02424] absolute right-0 top-0 cursor-pointer flex flex-row justify-center items-center "
                @click="course = 2" v-if="RuleTitle == 'Edit Recording Rule'">
                <svg-icon name="dele" width="13px" height="14px" class="svgLogo"></svg-icon>
                <span class="text-[14px] themeFontColor font-[700] font-Medium ml-[8px]">Delete</span>
              </div>
            </div>
            <div class="text-md text-[#9CA3AF] font-[500] font-Medium mt-[32px]">Scheduled Time</div>
            <div class="flex flex-row justify-between items-center mt-[16px]">
              <div class="startTimeDate flex-[1] h-[60px] flex flex-col justify-center items-start">
                <span
                  class="text-sm themeFontColor font-[500] font-Medium mb-[4px] ">Start Time</span>
                <div class="w-full h-[38px] relative">
                  <svg-icon name="time" width="16px" height="16px"
                            class="text-[var(--date)] absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s2k:top-[65%] s4k:top-[50%] svg4k"></svg-icon>
                  <a-time-picker v-model:value="FilterData.startTimeHM" format="HH:mm" :allowClear="false"
                                 placeholder="" class="s4k:absolute s4k:top-[10px]"/>
                </div>
              </div>
              <div
                class="startTimeDate flex-[1] h-[60px] ml-[16px] flex flex-col justify-center items-start">
                <span
                  class="text-sm themeFontColor font-[500] font-Medium mb-[4px]">End Time</span>
                <div class="w-full h-[38px] relative">
                  <svg-icon name="time" width="16px" height="16px"
                            class="text-[var(--date)] absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s2k:top-[65%] s4k:top-[50%] svg4k"></svg-icon>
                  <a-time-picker v-model:value="FilterData.endTimeHM" format="HH:mm" :allowClear="false"
                                 placeholder="" class="s4k:absolute s4k:top-[10px]"/>
                </div>
              </div>
            </div>
            <div class="text-md text-[#9CA3AF] font-[500] font-Medium mt-[32px]">Scheduled Days</div>
            <div class="w-full flex flex-wrap mt-[8px] relative">
              <div class="w-[50%] flex flex-row justify-start items-center mt-[10px]" v-for="item in dayList"
                   :key="item.desc">
                <input type="checkbox"
                       class="w-[16px] h-[16px] rounded bg-[var(--inputBg)] border-solid border-[var(--grid)] cursor-pointer"
                       v-model="item.isChecked">
                <span class="text-md themeFontColor font-[500] font-Medium ml-[8px]">{{ item.desc }}</span>
              </div>
              <span class="absolute right-0 bottom-0 text-sm text-[#9CA3AF] font-[400]">View list</span>
            </div>
            <fwb-alert info class="bg-[var(--alert)] mt-[32px]">
              <div class="flex flex-row justify-start items-center">
                <svg-icon name="info2" width="20px" height="20px" class="svg"></svg-icon>
                <span class="ml-[8px] text-[#FDBA8C] font-md font-[400] font-Medium">Your selection overlaps the current schedule. If you proceed with this selection, the current schedule will be overwritten. </span>
              </div>
            </fwb-alert>
            <div class="w-full h-[1px] bg-[var(--grid)] mt-[24px]"></div>
            <div class="text-md text-[#9CA3AF] font-[500] font-Medium mt-[24px]">Record Type</div>
            <div class="w-full flex flex-row mt-[16px]" id="radio">
              <div
                class="flex-[1] flex flex-row justify-center items-start h-[82px] border-solid border border-[var(--grid)] rounded-lg cursor-pointer "
                :style="{ border: typeIndex == 1 ? '#1C64F2 solid 1px' : 'var(--grid) solid 1px' }"
                @click="typeChange(1)">
                <fwb-radio v-model="typePicked" name="radio" value="one" class="flex-[1] mt-[16px] svg4k2"/>
                <div class="w-[169px] mt-[16px]">
                  <p class="themeFontColor text-md font-[500] ">Continuous</p>
                  <p class="text-[#9CA3AF] text-sm font-[400]">Camera records throughout set schedule</p>
                </div>
                <svg-icon name="time" width="22px" height="22px"
                          class="text-[var(--date)] flex-[1] mt-[16px] svg4k2"></svg-icon>
              </div>
              <div
                class="flex-[1] flex flex-row justify-center items-start h-[82px] border-solid border border-[var(--grid)] rounded-lg cursor-pointer ml-[12px]"
                :style="{ border: typeIndex == 2 ? '#1C64F2 solid 1px' : 'var(--grid) solid 1px' }"
                @click="typeChange(2)">
                <fwb-radio v-model="typePicked" name="radio" value="two" class="flex-[1] mt-[16px]"/>
                <div class="w-[169px] mt-[16px]">
                  <p class="themeFontColor text-md font-[500] ">Event Trigger</p>
                  <p class="text-[#9CA3AF] text-sm font-[400]">Camera only records when an event is
                    detected</p>
                </div>
                <svg-icon name="warn" width="22px" height="22px"
                          class="text-[var(--date)] flex-[1] mt-[16px] svg4k2"></svg-icon>
              </div>
            </div>
            <div class="w-full h-[1px] bg-[var(--grid)] mt-[24px]"></div>
            <div v-if="typeIndex == 1">
              <div class="text-md text-[#9CA3AF] font-[500] font-Medium mt-[24px]">Stream Type</div>
              <div id="radio2" class="w-full flex flex-wrap mt-[17px]">
                <div class="w-[50%] flex flex-row justify-start items-center">
                  <fwb-radio v-model="recordRadio" name="radio2" value="one" class="flex-[0.8]"/>
                  <span class="flex-[9] text-md themeFontColor font-[500] ">Mainstream</span>
                </div>
                <div class="w-[50%] flex flex-row justify-start items-center">
                  <fwb-radio v-model="recordRadio" name="radio2" value="two" class="flex-[0.8]"/>
                  <span class="flex-[9] text-md themeFontColor font-[500] ">Substream</span>
                </div>
              </div>
              <div class="text-md text-[#9CA3AF] font-[500] font-Medium mt-[24px]">Recording File Format
              </div>
              <div class="flex flex-row justify-between items-center mt-[16px]">
                <div
                  class="startTimeDate flex flex-col justify-center items-start relative">
                  <span class="text-sm themeFontColor font-[500] font-Medium mb-[4px]">File type</span>
                  <fwb-dropdown :text="selected.file" id="dropdown">
                    <fwb-list-group id="group">
                      <fwb-list-group-item hover v-for="v in FileOptions" :key="v.value" @click="clickTextUrl(1, v.name)">{{v.name}}</fwb-list-group-item>
                    </fwb-list-group>
                  </fwb-dropdown>
<!--                  <fwb-select v-model="selected.file" :options="FileOptions" size="sm" id="select"-->
<!--                              class="w-full mt-[4px] s4k:absolute s4k:top-0"/>-->
<!--                  <svg-icon name="down" width="15px" height="12px"-->
<!--                            class="svgClass svg4k absolute right-[5%] top-[60%] s4k:top-[70%]"></svg-icon>-->
                </div>
                <div
                  class="startTimeDate ml-[8px] flex flex-col justify-center items-start relative">
                  <span class="text-sm themeFontColor font-[500] font-Medium mb-[4px]">Video Codec</span>
                  <fwb-dropdown :text="selected.video" id="dropdown">
                    <fwb-list-group id="group">
                      <fwb-list-group-item hover v-for="v in VideoOptions" :key="v.value" @click="clickTextUrl(2, v.name)">{{v.name}}</fwb-list-group-item>
                    </fwb-list-group>
                  </fwb-dropdown>
<!--                  <fwb-select v-model="selected.video" :options="VideoOptions" size="sm" id="select"-->
<!--                              class="w-full mt-[4px] s4k:absolute s4k:top-0"/>-->
<!--                  <svg-icon name="down" width="15px" height="12px"-->
<!--                            class="svgClass svg4k absolute right-[5%] top-[60%] s4k:top-[70%]"></svg-icon>-->
                </div>
              </div>
              <div class="flex flex-row justify-between items-center mt-[16px]">
                <div
                  class="startTimeDate flex-[1] flex flex-col justify-center items-start relative">
                  <span class="text-sm themeFontColor font-[500] font-Medium mb-[4px]">Audio Codec</span>
                  <fwb-dropdown :text="selected.audio" id="dropdown">
                    <fwb-list-group id="group">
                      <fwb-list-group-item hover v-for="v in AudioOptions" :key="v.value" @click="clickTextUrl(3, v.name)">{{v.name}}</fwb-list-group-item>
                    </fwb-list-group>
                  </fwb-dropdown>
<!--                  <fwb-select v-model="selected.audio" :options="AudioOptions" size="sm" id="select"-->
<!--                              class="w-full mt-[4px] s4k:absolute s4k:top-0"/>-->
<!--                  <svg-icon name="down" width="15px" height="12px"-->
<!--                            class="svgClass svg4k absolute right-[5%] top-[60%] s4k:top-[70%]"></svg-icon>-->
                </div>
                <div
                  class="startTimeDate flex-[1] h-[60px] ml-[8px] flex flex-col justify-center items-start relative"></div>
              </div>
              <div class="w-full h-[1px] bg-[var(--grid)] mt-[24px]"></div>
              <div
                class="text-md text-[#9CA3AF] font-[500] font-Medium mt-[24px] flex flex-row justify-start items-center">
                <span>Timelapse</span>
                <el-tooltip placement="right">
                  <template #content>
                    <div class="w-[229px]">
                      Timelapse enables you to take a snapshot from the selected CCTV at fixed intervals. Footage is
                      taken from mainstream streams.
                    </div>
                  </template>
                  <svg-icon name="info" width="16px" height="16px"
                            class="svgLogo svg4k ml-[4px] s4k:ml-[10px] cursor-pointer"></svg-icon>
                </el-tooltip>
              </div>
              <div
                class="flex flex-row justify-start items-center mt-[16px] mb-[20px] s4k:mb-[40px]">
                <input type="checkbox"
                       class="w-[16px] h-[16px] rounded bg-[var(--inputBg)] border border-solid border-[var(--grid)] cursor-pointer"
                       v-model="selected.timelapse">
                <span class="text-md themeFontColor font-[500] font-Medium ml-[8px]">Enable Timelapse</span>
              </div>
              <div v-if="selected.timelapse" class="flex flex-row justify-between items-center mt-[16px]">
                <div class="startTimeDate flex-[1] h-[60px] flex flex-col justify-center items-start relative">
                  <span
                    class="text-sm themeFontColor font-[500] font-Medium mb-[4px]">Interval</span>
                  <fwb-dropdown :text="selected.interval" id="dropdown">
                    <fwb-list-group id="group2">
                      <fwb-list-group-item hover v-for="v in IntervalOptions" :key="v.value" @click="clickTextUrl(4, v.name)">{{v.name}}</fwb-list-group-item>
                    </fwb-list-group>
                  </fwb-dropdown>
<!--                  <fwb-select v-model="selected.interval" :options="IntervalOptions" size="sm" id="select"-->
<!--                              class="w-full mt-[4px] s4k:absolute s4k:top-0"/>-->
<!--                  <svg-icon name="down" width="15px" height="12px"-->
<!--                            class="svgClass absolute right-[5%] top-[60%]"></svg-icon>-->
                </div>
                <div
                  class="startTimeDate flex-[1] h-[60px] ml-[8px] flex flex-col justify-center items-start relative"></div>
              </div>
              <div v-show="selected.timelapse"
                   class="text-[#9CA3AF] font-[400] font-Medium text-sm mt-[3px] mb-[24px] s4k:mt-[15px] s4k:mb-[40px]">
                An image is snapped at these intervals
              </div>
            </div>
            <div v-else>
              <div class="text-md text-[#9CA3AF] font-[500] font-Medium mt-[24px]">Trigger Types</div>
              <div id="radio2" class="w-full flex flex-wrap mt-[8px] relative">
                <div class="w-[50%] flex flex-row justify-start items-start mt-[10px]"
                     v-for="item in TriggerList"
                     :key="item.desc">
                  <fwb-radio v-model="triggerPicked" name="radio3" :value="item.name" class="flex-[1]"/>
                  <div class="flex-[10] text-md themeFontColor font-[500] font-Medium ml-[8px]">
                    <p>{{ item.name }}</p>
                    <span class="flex-[10] text-sm text-[#9CA3AF] font-[400]">{{ item.desc }}</span>
                  </div>
                </div>
              </div>
              <div class="text-md text-[#9CA3AF] font-[500] font-Medium mt-[24px] ">Start and End Intervals</div>
              <p class="text-[#9CA3AF] font-[400] font-Medium text-md mt-[3px] ">Choose how long you want to record
                before and after an event. </p>
              <div class="flex flex-row justify-between items-center mt-[16px]">
                <div
                  class="startTimeDate flex-[1] h-[60px] flex flex-col justify-center items-start relative">
                  <span class="text-sm themeFontColor font-[500] font-Medium mb-[4px]">Start Interval</span>
                  <fwb-dropdown :text="selected2.startInterval" id="dropdown">
                    <fwb-list-group id="group">
                      <fwb-list-group-item hover v-for="v in startIntervalOptions" :key="v.value" @click="clickTextUrl(5, v.name)">{{v.name}}</fwb-list-group-item>
                    </fwb-list-group>
                  </fwb-dropdown>
<!--                  <fwb-select v-model="selected2.startInterval" :options="startIntervalOptions" size="sm" id="select"-->
<!--                              class="w-full mt-[4px]"/>-->
<!--                  <svg-icon name="down" width="15px" height="12px"-->
<!--                            class="svgClass absolute right-[5%] top-[60%]"></svg-icon>-->
                </div>
                <div
                  class="startTimeDate flex-[1] h-[60px] ml-[8px] flex flex-col justify-center items-start relative">
                  <span class="text-sm themeFontColor font-[500] font-Medium mb-[4px]">End Interval</span>
                  <fwb-dropdown :text="selected2.endInterval" id="dropdown">
                    <fwb-list-group id="group">
                      <fwb-list-group-item hover v-for="v in endIntervalOptions" :key="v.value" @click="clickTextUrl(6, v.name)">{{v.name}}</fwb-list-group-item>
                    </fwb-list-group>
                  </fwb-dropdown>
<!--                  <fwb-select v-model="selected2.endInterval" :options="endIntervalOptions" size="sm" id="select"-->
<!--                              class="w-full mt-[4px]"/>-->
<!--                  <svg-icon name="down" width="15px" height="12px"-->
<!--                            class="svgClass absolute right-[5%] top-[60%]"></svg-icon>-->
                </div>
              </div>
              <div class="w-full h-[1px] bg-[var(--grid)] mt-[24px]"></div>
              <div class="text-md text-[#9CA3AF] font-[500] font-Medium mt-[24px]">Stream Type</div>
              <div id="radio2" class="w-full flex flex-wrap mt-[17px]">
                <div class="w-[50%] flex flex-row justify-start items-center">
                  <fwb-radio v-model="recordRadio" name="radio2" value="one" class="flex-[1]"/>
                  <span class="flex-[9] text-md themeFontColor font-[500] ">Mainstream</span>
                </div>
                <div class="w-[50%] flex flex-row justify-start items-center">
                  <fwb-radio v-model="recordRadio" name="radio2" value="two" class="flex-[1]"/>
                  <span class="flex-[9] text-md themeFontColor font-[500] ">Substream</span>
                </div>
              </div>
              <div class="text-md text-[#9CA3AF] font-[500] font-Medium mt-[24px]">Recording File Format
              </div>
              <div class="flex flex-row justify-between items-center mt-[16px]">
                <div
                  class="startTimeDate flex-[1] h-[60px] flex flex-col justify-center items-start relative">
                  <span
                    class="text-sm themeFontColor font-[500] font-Medium mb-[4px]">File type</span>
                  <fwb-dropdown :text="selected.file" id="dropdown">
                    <fwb-list-group id="group">
                      <fwb-list-group-item hover v-for="v in FileOptions" :key="v.value" @click="clickTextUrl(1, v.name)">{{v.name}}</fwb-list-group-item>
                    </fwb-list-group>
                  </fwb-dropdown>
                </div>
                <div
                  class="startTimeDate flex-[1] h-[60px] ml-[8px] flex flex-col justify-center items-start relative">
                  <span class="text-sm themeFontColor font-[500] font-Medium mb-[4px]">Video Codec</span>
                  <fwb-dropdown :text="selected.video" id="dropdown">
                    <fwb-list-group id="group">
                      <fwb-list-group-item hover v-for="v in VideoOptions" :key="v.value" @click="clickTextUrl(2, v.name)">{{v.name}}</fwb-list-group-item>
                    </fwb-list-group>
                  </fwb-dropdown>
                </div>
              </div>
              <div class="flex flex-row justify-between items-center mt-[16px] mb-[20px] s4k:mb-[60px]">
                <div
                  class="startTimeDate flex-[1] h-[60px] flex flex-col justify-center items-start relative">
                  <span class="text-sm themeFontColor font-[500] font-Medium mb-[4px]">Audio Codec</span>
                  <fwb-dropdown :text="selected.audio" id="dropdown">
                    <fwb-list-group id="group2">
                      <fwb-list-group-item hover v-for="v in AudioOptions" :key="v.value" @click="clickTextUrl(3, v.name)">{{v.name}}</fwb-list-group-item>
                    </fwb-list-group>
                  </fwb-dropdown>
                </div>
                <div
                  class="startTimeDate flex-[1] h-[60px] ml-[8px] flex flex-col justify-center items-start relative"></div>
              </div>
            </div>
          </div>
          <div v-else class="w-full h-[666px]">
            <div
              class="text-[20px] font-Medium font-[700] pr-[30px] absolute top-[80px] left-[20px] z-[999] s4k:top-[100px]">
              Copy to Cameras
            </div>
            <div class="w-full flex flex-row " id="radio">
              <div
                class="flex-[1] flex flex-row justify-center items-start h-[82px] border-solid border mt-[40px] border-[var(--grid)] rounded-lg cursor-pointer z-[999]"
                :style="{ border: typeIndex2 == 1 ? '#1C64F2 solid 1px' : 'var(--grid) solid 1px' }"
                @click="typeChange2(1)">
                <fwb-radio v-model="typePicked2" name="radio" value="one" class="flex-[1] mt-[16px]"/>
                <div class="w-[206px] mt-[16px]">
                  <p class="themeFontColor text-md font-[500] s4k:text-[13.5px]">Copy to other Cameras</p>
                  <p class="text-[#9CA3AF] text-sm font-[400]">Selected Cameras will have the Recording
                    rule applied to them</p>
                </div>
                <div class="flex-[1]"></div>
              </div>
              <div
                class="flex-[1] flex flex-row justify-center items-start h-[82px] border-solid border mt-[40px] border-[var(--grid)] rounded-lg cursor-pointer ml-[12px] z-[999]"
                :style="{ border: typeIndex2 == 2 ? '#1C64F2 solid 1px' : 'var(--grid) solid 1px' }"
                @click="typeChange2(2)">
                <fwb-radio v-model="typePicked2" name="radio" value="two" class="flex-[1] mt-[16px]"/>
                <div class="w-[206px] mt-[16px]">
                  <p class="themeFontColor text-md font-[500] s4k:text-[13.5px]">Do not copy to other Cameras</p>
                  <p class="text-[#9CA3AF] text-sm font-[400]">Nothing will be copied to other cameras</p>
                </div>
                <div class="flex-[1]"></div>
              </div>
            </div>
            <div
              class="h-[60px] w-full mt-[24px] border-[var(--grid)] border border-solid rounded-lg flex flex-row items-center justify-around">
              <svg-icon name="warn" width="24px" height="24px" class="text-[var(--date)] svg4k2"></svg-icon>
              <div class="w-[426px]">
                <p class="text-[10px] font-[500] text-[#9CA3AF] font-Medium">Current Rule: </p>
                <p class="text-[14px] font-[500] themeFontColor font-Medium ">Event Triggered, Mon-Sun, 24hr</p>
              </div>
              <span class="text-[14px] font-[500] text-[#9CA3AF] font-Medium cursor-pointer ">Edit</span>
            </div>
            <div class="w-full h-[357px] mt-[24px] border-[var(--grid)] border border-solid">
              <div
                class="w-full h-[50px] bg-[var(--theme-search-bg)] text-sm text-[#9CA3AF] font-[700] font-Medium flex flex-row justify-start items-center">
                <div class="w-[40px] text-center">
                  <input type="checkbox" v-model="checkAll"
                         class="w-[16px] h-[16px] rounded bg-[var(--grid)] cursor-pointer">
                </div>
                <div
                  class="w-[200px] h-full leading-[60px] pl-[16px] flex flex-row justify-start items-center">
                  CAMERA
                </div>
                <div
                  class="w-[200px] h-full leading-[60px] pl-[16px] flex flex-row justify-start items-center">
                  LOCATION
                </div>
              </div>
              <div id="list" class="w-full h-[308px]">
                <div
                  class="w-full h-[50px] border-b border-solid border-[var(--grid)] text-md text-[#9CA3AF] font-[500] font-Medium flex flex-row justify-start items-center"
                  v-for="item in checkList" :key="item.id">
                  <div class="w-[40px] text-center">
                    <input type="checkbox" v-model="item.checked"
                           class="w-[16px] h-[16px] rounded bg-[var(--grid)] cursor-pointer">
                  </div>
                  <div
                    class="w-[200px] h-full pl-[16px] flex flex-row justify-start items-center themeFontColor">
                    {{ item.camera }}
                  </div>
                  <div
                    class="w-[200px] h-full pl-[16px] flex flex-row justify-start items-center">
                    {{ item.location }}
                  </div>
                </div>
              </div>
            </div>
            <div class="text-[#9CA3AF] font-[500] font-Medium text-md mt-[24px] ">9 of 9 cameras selected</div>
          </div>
          <div class="mask" :style="{'visibility': typeIndex2 == 2 ? 'visible':'hidden'}"></div>
        </div>
      </template>
      <template #footer>
        <div v-if="course == 1"
             class="absolute bottom-0 left-0 w-full h-[81px] border-t border-solid border-[var(--grid)] bg-[var(--theme)] z-[999] flex flex-row justify-start items-center ">
          <div
            class="w-[160px] h-[41px] font-[700] text-white font-Medium text-md bg-[#1C64F2] rounded-lg flex ml-[1rem] cursor-pointer s4k:rounded-[8px]"
            @click="course = 2"><span class="m-auto">Next</span></div>
        </div>
        <div v-else
             class="absolute bottom-0 left-0 w-full h-[81px] border-t border-solid border-[var(--grid)] z-[999] flex flex-row justify-start items-center  ">
          <div
            class="w-[160px] h-[41px] font-[700] text-white font-Medium text-md bg-[#1C64F2] rounded-lg flex ml-[1rem] cursor-pointer s4k:rounded-[8px]"
            @click="Confirm"><span class="m-auto">Confirm</span></div>
        </div>
      </template>
    </fwb-modal>
  </div>

</template>

<script setup>
import moment from 'moment';
import {onMounted, reactive, ref} from "vue";
import {
  FwbButton,
  FwbModal,
  FwbRadio,
  FwbSelect,
  FwbAlert,
  FwbDropdown, FwbListGroup, FwbListGroupItem
} from 'flowbite-vue'
import settingStore from '@/store/modules/setting'
import SvgIcon from "@/components/SvgIcon.vue";

const store = settingStore()

const course = ref(1)
const selected = reactive({
  file: 'File type 1',
  video: 'Video type 1',
  audio: 'Audio type 1',
  timelapse: false,
  interval: '10 mins',
})
const FileOptions = ref([
  {value: '1', name: 'File type 1'},
  {value: '2', name: 'File type 2'},
  {value: '3', name: 'File type 3'},
])
const VideoOptions = ref([
  {value: '1', name: 'Video type 1'},
  {value: '2', name: 'Video type 2'},
  {value: '3', name: 'Video type 3'},
])
const AudioOptions = ref([
  {value: '1', name: 'Audio type 1'},
  {value: '2', name: 'Audio type 2'},
  {value: '3', name: 'Audio type 3'},
])
const IntervalOptions = ref([
  {value: '1', name: '10 mins'},
  {value: '2', name: '30 mins'},
  {value: '3', name: '60 mins'},
])
const triggerPicked = ref('Motion')
const TriggerList = ref([
  {name: 'Motion', desc: null,},
  {name: 'Sound', desc: null,},
  {name: 'Motion or Sound', desc: 'Video is recorded if either motion or sound are triggered',},
  {name: 'Motion and Sound', desc: 'Video is recorded only if both motion and sound are detected',},
])
/*****************************/
const selected2 = reactive({
  startInterval: '10 secs',
  endInterval: '10 secs',
})
const startIntervalOptions = ref([
  {value: '1', name: '10 secs'},
  {value: '2', name: '30 secs'},
  {value: '3', name: '60 secs'},
])
const endIntervalOptions = ref([
  {value: '1', name: '10 secs'},
  {value: '2', name: '30 secs'},
  {value: '3', name: '60 secs'},
])
const clickTextUrl = (num, text) => {
  if(num === 1){
    selected.file = text
  }else if(num === 2){
    selected.video = text
  }else if(num === 3){
    selected.audio = text
  } else if(num === 4){
    selected.interval = text
  }else if(num === 5){
    selected2.startInterval = text
  } else if(num === 6){
    selected2.endInterval = text
  }
}
/**************  course == 2  *********************/
const typeIndex2 = ref(1)
const typePicked2 = ref('one')
const typeChange2 = (id) => {
  typeIndex2.value = id
  if (id == 1) {
    typePicked2.value = 'one'
    return false
  }
  typePicked2.value = 'two'
}
const checkAll = ref(true)
const checkList = ref([]);
for (let i = 0; i < 10; i++) {
  checkList.value.push({
    id: i + 1,
    camera: `Camera 00${i + 1}`,
    location: `Location ${i + 1}`,
    checked: true,
  });
}
const Confirm = () => {
  closeModal()
  store.showBox()
}

const RuleTitle = ref('')
const isShowModal = ref(false)
const closeModal = () => {
  isShowModal.value = false
  course.value = 1
}
const showModal = (id) => {
  isShowModal.value = true
  if (id == 1) {
    RuleTitle.value = 'Create a New Recording Rule'
    return false
  }
  RuleTitle.value = 'Edit Recording Rule'
}

const FilterData = reactive({
  startTimeHM: '', // moment('00:00', 'HH:mm')
  endTimeHM: '', // moment('00:00', 'HH:mm')
})
const dayList = ref([
  {desc: 'Monday', isChecked: false},
  {desc: 'Friday', isChecked: true},
  {desc: 'Tuesday', isChecked: false},
  {desc: 'Saturday', isChecked: true},
  {desc: 'Wednesday', isChecked: true},
  {desc: 'Sunday', isChecked: false},
  {desc: 'Thursday', isChecked: false},
  {desc: 'Public Holidays', isChecked: true},
])
const typeIndex = ref(1)
const typePicked = ref('one')
const typeChange = (id) => {
  typeIndex.value = id
  if (id == 1) {
    typePicked.value = 'one'
    return false
  }
  typePicked.value = 'two'
}
// Record Type
const recordRadio = ref('one')
defineExpose({
  showModal,
})
</script>

<style scoped lang="scss">
.mask {
  width: 100%;
  height: 666px;
  background: var(--modalMask);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

#CreateModal {
  :deep(.max-w-md) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    max-width: 576px;
    height: 838px;

    button {
      cursor: pointer;

      &:hover {
        background: var(--theme);
      }

      svg {
        color: #6B7280;
      }
    }

    .bg-white {
      width: 100%;
      height: 100%;
      background-color: var(--theme);
    }

    .p-6 {
      padding: 1.5rem 1rem;

      .list {
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-right: 15px;
      }

      .list::-webkit-scrollbar {
        width: 4px;
      }

      .list::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-thumb);
        border-radius: 10px;
      }

      .list::-webkit-scrollbar-track {
        background-color: var(--scrollbar-track);
        border-radius: 10px;
      }
    }
  }
}

.startTimeDate {
  .ant-picker {
    height: 37px;
    background-color: var(--theme);
    border: solid 1px var(--grid);
    width: 100%;
    border-radius: 8px;

    :deep(input) {
      padding-left: 25px;
      color: var(--theme-font-color) !important;
    }

    :deep(svg) {
      display: none;
    }
  }
}

#radio {
  :deep(label) {
    input {
      width: 16px;
      height: 16px;
      border: solid 1px var(--grid);
      background-color: var(--inputBg);
      margin-left: 16px;
      cursor: pointer;

      &:checked {
        border: solid 4px #1C64F2;
        // background-color: #111928;
        // border-color: #111928;
      }

      &:focus {
        box-shadow: inset 0 0;
      }
    }

    .text-sm {
      font-size: 16px;
      font-family: Medium;
    }
  }
}

#radio2 {
  :deep(label) {
    input {
      width: 16px;
      height: 16px;
      border: solid 1px var(--grid);
      background-color: var(--inputBg);
      cursor: pointer;

      &:checked {
        border: solid 4px #1C64F2;
        // background-color: #1C64F2;
        // border-color: #1C64F2;
      }

      &:focus {
        box-shadow: inset 0 0;
      }
    }

    .text-sm {
      font-size: 16px;
      font-family: Medium;
    }
  }
}

#select {
  :deep(select) {
    background: var(--theme);
    border: solid var(--grid) 1px;
    box-shadow: none;
    color: var(--theme-font-color);
    height: 37px;
    option {
      background: var(--theme-right);
      color: var(--theme-font-color);
    }
  }
}
#dropdown{
  :deep(button){
    background: var(--theme);
    border: solid var(--grid) 1px;
    box-shadow: none;
    color: var(--theme-font-color);
    background-color: var(--theme) !important;
    box-sizing: border-box;
    cursor: pointer;
    width: 259px;
    height: 37px;
    border-radius: 8px;
    font-size: 1rem;
    padding: 0 0 0 10px;
    margin-top: 3px;
    position: relative;
    svg{
      position: absolute;
      right: 3%;
      top: 50%;
      transform: translateY(-50%);
      width: 15px;
      height: 15px;
      color: var(--svg);
    }
  }
  #group,#group2{
    width: 257px;
    height: 98px;
    color: var(--theme-font-color);
    border-radius: 0px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    li{
      height: 20px;
      padding-left: 15px;
      padding-right: 0;
      cursor: pointer;
      font-size: 1rem;
      border-bottom: solid var(--grid) 1px;
      &:hover{
        color: var(--theme-font-color-hover);
        background-color: var(--grid);
      }
    }
  }
}
@media screen and (min-width: 2560px) {
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(1.3);
    }
  }
  #dropdown{
    position: relative;
    #group{
      height: 110px;
      position: absolute;
      top: -15px;
      li{
        height: 20px;
        padding-left: 15px;
        padding-right: 0;
        cursor: pointer;
        font-size: 1rem;
        border-bottom: solid var(--grid) 1px;
        &:hover{
          color: var(--theme-font-color-hover);
          background-color: var(--grid);
        }
      }
    }
  }
}

@media screen and (min-width: 3840px) {
  //.mask{
  //  height: 1332px;
  //}
  //.svg{
  //  transform: scale(1) !important;
  //}
  .svg4k{
    transform: scale(1.2) !important;
  }
  .svg4k2{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(2);
      .p-4{
        padding: 0.8rem;
      }
      .p-6 {
        padding:  1rem;
      }
    }
  }

  //.startTimeDate {
  //  .ant-picker {
  //    height: 74px;
  //    :deep(input) {
  //      padding-left: 50px;
  //    }
  //  }
  //}
  //
  #radio {
    :deep(label) {
      input {
        transform: scale(1);
        &:checked {
          border: solid 4px #1C64F2;
        }
      }
    }
  }
  #radio2 {
    :deep(label) {
      input {
        transform: scale(1);
        &:checked {
          border: solid 4px #1C64F2;
        }
      }
    }
  }
  //
  //#radio2 {
  //  :deep(label) {
  //    input {
  //      transform: scale(2);
  //      &:checked {
  //        border: solid 4px #1C64F2;
  //      }
  //    }
  //    .text-sm {
  //      font-size: 32px;
  //    }
  //  }
  //}
  #select{
    :deep(select){
      padding: 0 0 0 10px;
      border-radius: 8px;
    }
  }
  input[type="checkbox"] {
    border-radius: 4px;
  }
  #dropdown{
    position: relative;
    :deep(button){
      font-size: 14px;
    }
    #group{
      height: 100px;
      position: absolute;
      top: -45px;
      li{
        font-size: 14px;
        height: 10px;
        padding-left: 15px;
        padding-right: 0;
        cursor: pointer;
        border-bottom: solid var(--grid) 1px;
        &:hover{
          color: var(--theme-font-color-hover);
          background-color: var(--grid);
        }
      }
    }
    #group2{
      height: 100px;
      position: absolute;
      bottom: 130px;
      li{
        font-size: 14px;
        height: 10px;
        padding-left: 15px;
        padding-right: 0;
        cursor: pointer;
        border-bottom: solid var(--grid) 1px;
        &:hover{
          color: var(--theme-font-color-hover);
          background-color: var(--grid);
        }
      }
    }
  }
}
</style>
<style>
#list {
  overflow-y: scroll;
  padding-right: 1px;
}

#list::-webkit-scrollbar {
  width: 3px;
}

#list::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 10px;
}

#list::-webkit-scrollbar-track {
  border-right: 1px solid var(--scrollbar-thumb);
  background-color: var(--scrollbar-track);
  border-radius: 10px;
}
</style>